<html>
<head>
   <title>Datawrapper API Test Page</title>
   <script type="text/javascript" src="/static/vendor/jquery/jquery.min.js"></script>
   <script type="text/javascript" src="/static/vendor/cryptojs/hmac-sha256.js"></script>
   <script type="text/javascript" src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="/static/vendor/bootstrap/js/bootstrap-alert.js"></script>
   <link rel="stylesheet" type="text/css" href="/static/vendor/bootstrap/css/bootstrap.css">
   <link rel="stylesheet" type="text/css" href="/static/vendor/bootstrap/css/bootstrap-datawrapper.css">
   <style type="text/css">
.input-xlarge { height: 28px; }
h1,h2,h3,h4,h5 { font-weight: normal; }
.row { padding: 18px 0; }
.row.sep { border-top: 1px solid #c00; }
.output { color: #999; }
.output .alert { margin-right: 15px; }
.output .code { white-space: pre;}
.output .key { color: #336633;}
.output .string { color: #b84;}
.output .boolean, .well .null { color: #0000;}
.output .close-btn { position: absolute; top: 10px; right: 10px; cursor: pointer;}
.row:nth-child(even) { background-color: whiteSmoke; }
   </style>
   <script type="text/javascript">

function checkPwd(pwd) {
   return $.trim(pwd).length > 7;
}

function formatJSON(json) {
    json = JSON.stringify(json, undefined, 4);
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

function log(id, json) {
   if (typeof(json) == "string") json = JSON.parse(json);
   var out = $('<div class="alert alert-'+(json.status == 'ok' ? 'success' : 'error')+'" />');
   out.append('<a class="close" data-dismiss="alert" href="#">&times;</a>');
   out.append('<div class="code">'+formatJSON(json)+'</div>');
   $('#'+id).prepend(out);
   $(".alert").alert();
}
   </script>

</head>
<body>
   <div class="container">
      <div class="row">
         <div class="span12">
            <div class="page-header">
               <h2>Datawrapper JSON API Test Page</h2>
               <small>Just a few forms to test the core functionality in the upcoming Datawrapper release</small>
            </div>
         </div>
      </div>

      <!-- get list of users -->

     <div class="row">
         <div class="span2">users</div>
         <div class="span1">GET</div>
         <div class="span5 form-vertical">
            <a id="get-users" class="btn btn-primary">get list of users</a>
         </div>
         <div class="span4">
            <div id="get-users-out" class="output">retreive a list of all users</div>
         </div>
         <script type="text/javascript">
            $('#get-users').click(function() {
               $.ajax({
                  url: '/api/users',
                  type: 'GET',
                  success: function(data) {
                     log('get-users-out', data);
                  }
               });
            });
         </script>
      </div>

      <!-- register a new user -->

      <div class="row">
         <div class="span1 offset2">POST</div>
         <div class="span5 form-vertical">
            <input id="register-email" type="text" class="input-xlarge span3" placeholder="email" />
            <input id="register-pwd" type="password" class="input-xlarge span3" placeholder="password" />
            <input id="register-pwd-2" type="password" class="input-xlarge span3" placeholder="repeat password" /><br />
            <a id="register" class="btn btn-primary">add a new user</a>
         </div>
         <div class="span4">
            <div id="register-out" class="output">register a new user</div>
         </div>
         <script type="text/javascript">
            $.getJSON('/api/auth/salt', function(res) {
               if (res.status == 'ok') {
                  $('#register').data('salt', res.data.salt);
               }
            });

            $('#register').click(function() {

               var pwd = $.trim($('#register-pwd').val()),
                  pwd2 = $.trim($('#register-pwd-2').val());

               if (pwd == pwd2) {
                  if (checkPwd(pwd)) {

                     var payload = {
                        email: $('#register-email').val(),
                        pwd: CryptoJS.HmacSHA256(pwd, $('#register').data('salt')).toString(),
                        pwd2: CryptoJS.HmacSHA256(pwd2, $('#register').data('salt')).toString(),
                     };

                     $.ajax({
                        url: '/api/users',
                        type: 'POST',
                        data: JSON.stringify(payload),
                        success: function(data) {
                           log('register-out', data);
                        }
                     });
                  } else {
                     alert('Error: password is to unsecure. please chose a password with at least 8 characters');
                  }
               } else {
                  alert('Error: password mismatch');
               }
            });
         </script>
      </div>

      <!-- login user -->

      <div class="row sep">
         <div class="span2">auth/login</div>
         <div class="span1">POST</div>
         <div class="span5 form-inline">
            <input id="login-email" type="text" class="input-xlarge span2" value="" placeholder="email" />
            <input id="login-pwd" type="password" class="input-xlarge span2" value="" placeholder="password" />
            <a id="login" class="btn btn-primary">login</a>
         </div>
         <div class="span4">
            <div id="login-out" class="output">user login</div>
         </div>
         <script type="text/javascript">
            $.getJSON('/api/auth/salt', function(res) {
               if (res.status == 'ok') {
                  $('#login').data('salt', res.data.salt);
                  $('#login').data('time', res.data.time);
               }
            });

            $('#login').click(function() {
               var lg = $('#login'), hmac = CryptoJS.HmacSHA256,
                  pwd = $('#login-pwd').val(),
                  hash = hmac(hmac(pwd, lg.data('salt')).toString(), String(lg.data('time'))).toString(),
                  payload = {
                     email: $('#login-email').val(),
                     pwhash: hash,
                     time: $('#login').data('time')
                  };
               if (checkPwd(pwd)) {
                  $('#login-email').val('');
                  $('#login-pwd').val('');
                  $.ajax({
                     url: '/api/auth/login',
                     type: 'POST',
                     data: JSON.stringify(payload),
                     success: function(data) {
                        log('login-out', data);
                     }
                  });
               } else {
                  alert('Error: password is to unsecure. please chose a password with at least 8 characters');
               }
            });
         </script>
      </div>

      <div class="row">
         <div class="span2">activate</div>
         <div class="span1">GET</div>
         <div class="span5 form-inline">
            <input id="activate-token" type="text" class="input-xlarge span4" placeholder="insert your received token here" />
            <a id="activate" class="btn btn-primary">activate</a>
            
         </div>
         <div class="span4">
            <div id="activate-out" class="output">activate user account after receiving token via email</div>
         </div>
         <script type="text/javascript">
            $('#activate').click(function() {
               $.ajax({
                  url: '/api/activate/'+$('#activate-token').val(),
                  type: 'GET',
                  success: function(data) {
                     log('activate-out', data);
                  }
               })
            });
         </script>
      </div>

      <!-- get current user -->

      <div class="row sep">
         <div class="span2">account</div>
         <div class="span1">GET</div>
         <div class="span5 form-inline">
            <a id="get-session" class="btn btn-primary">get session</a>
         </div>
         <div class="span4">
            <div id="get-session-out" class="output">find out who's logged in currently</div>
         </div>
         <script type="text/javascript">
            $('#get-session').click(function() {
               $.ajax({
                  url: '/api/account',
                  type: 'GET',
                  success: function(data) {
                     log('get-session-out', data);
                  }
               });
            });
         </script>
      </div>

      <!-- set current language -->

      <div class="row">
         <div class="span2">account/lang</div>
         <div class="span1">PUT</div>
         <div class="span5 form-inline">
            <a id="set-lang" class="btn btn-primary">set language to..</a>
             <input id="set-lang-val" type="text" class="input-xlarge span1" value="de" />
         </div>
         <div class="span4">
            <div id="set-lang-out" class="output">change frontend language</div>
         </div>
         <script type="text/javascript">
            $('#set-lang').click(function() {
               $.ajax({
                  url: '/api/account/lang',
                  type: 'PUT',
                  data: JSON.stringify({ lang: $('#set-lang-val').val() }),
                  processData: false,
                  success: function(data) {
                     log('set-lang-out', data);
                  }
               })
            });
         </script>
      </div>

      <!-- change user password -->

      <div class="row">
         <div class="span2">users/:id</div>
         <div class="span1">PUT</div>
         <div class="span5 form-vertical">
            <input id="change-user-pwd-old" type="password" class="input-xlarge span3" value="" placeholder="old password" />
            <input id="change-user-pwd" type="password" class="input-xlarge span3" value="" placeholder="new password" />
            <input id="change-user-pwd-2" type="password" class="input-xlarge span3" value="" placeholder="confirm new password" /><br />
            <a id="change-user" class="btn btn-primary">change password</a>
         </div>
         <div class="span4">
            <div id="change-user-out" class="output">change password of logged user</div>
         </div>
         <script type="text/javascript">
            $.getJSON('/api/auth/salt', function(res) {
               if (res.status == 'ok') {
                  $('#change-user').data('salt', res.data.salt);
                  $('#change-user').data('time', res.data.time);
               }
            });

            $('#change-user').click(function() {

               var pwd = $.trim($('#change-user-pwd').val()),
                   pwd2 = $.trim($('#change-user-pwd-2').val());
               if (pwd == pwd2) {
                  if (checkPwd(pwd)) {

                     var lg = $('#change-user'), hmac = CryptoJS.HmacSHA256,
                     hash = hmac(hmac($('#change-user-pwd-old').val(), lg.data('salt')).toString(), String(lg.data('time'))).toString(),
                     payload = {
                        oldpwhash: hash,
                        time: lg.data('time'),
                        pwd: CryptoJS.HmacSHA256($('#change-user-pwd').val(), $('#register').data('salt')).toString()
                     };

                     $('#change-user-pwd').val('');
                     $('#change-user-pwd-2').val('');
                     $('#change-user-pwd-old').val('');

                     $.ajax({
                        url: '/api/users/current',
                        type: 'PUT',
                        data: JSON.stringify(payload),
                        success: function(data) {
                           log('change-user-out', data);
                        }
                     });
                  } else {
                     alert('Error: password is to unsecure. please chose a password with at least 8 characters');
                  }
               } else {
                  alert('Error: password mismatch');
               }
            });
         </script>
      </div>

      <!-- get list of all charts by this user -->

      <div class="row sep">
         <div class="span2">charts</div>
         <div class="span1">GET</div>
         <div class="span5">
            <a id="get-charts" class="btn btn-primary">get my charts</a>
         </div>
         <div class="span4">
             <div id="get-charts-out" class="output">get (brief) list of all charts by the current user</div>
         </div>
         <script type="text/javascript">
         $('#get-charts').click(function() {
            $.ajax({
               url: '/api/charts',
               type: 'GET',
               success: function(data) {
                  log('get-charts-out', data);
               }
            });
         });
         </script>
      </div>

      <!-- add a new empty chart -->

      <div class="row">
         <div class="span1 offset2">POST</div>

         <div class="span5 form-vertical">
            <a id="add-chart" class="btn btn-primary">create new chart</a>
         </div>
         <div class="span4">
            <div id="add-chart-out" class="output">create a new empty chart</div>
         </div>
         <script type="text/javascript">
            $('#add-chart').click(function() {
               $.ajax({
                  url: '/api/charts',
                  type: 'POST',
                  success: function(data) {
                     log('add-chart-out', data);
                  }
               });
            });
         </script>
      </div>

      <div class="row">
         <div class="span2">charts/:id</div>
         <div class="span1">GET</div>
         <div class="span5 form-inline">
            <input id="get-chart-id" type="text" class="input-xlarge span2" placeholder="chart-id" />
            <a id="get-chart" class="btn btn-primary">load chart info</a>
         </div>
         <div class="span4">
            <div id="get-chart-out" class="output">get chart info</div>
         </div>
         <script type="text/javascript">
            $('#get-chart').click(function() {
               $.ajax({
                  url: '/api/charts/'+$('#get-chart-id').val(),
                  type: 'GET',
                  success: function(data) {
                     log('get-chart-out', data);
                  }
               });
            });
         </script>
      </div>

      <!-- update chart metadata -->

      <div class="row">
         <div class="span1 offset2">PUT</div>
         <div class="span5 form-vertical">
            <input id="update-chart-id" type="text" class="input-xlarge span2" placeholder="insert chart id" />
            <textarea id="update-chart-json" class="span4" rows="6" placeholder="paste json metadata here"></textarea>
            <a id="update-chart" class="btn btn-primary">update chart</a>
         </div>
         <div class="span4">
            <div id="update-chart-out" class="output"></div>
         </div>
         <script type="text/javascript">
            $('#update-chart').click(function() {
               $.ajax({
                  url: '/api/charts/'+$('#get-chart-id').val(),
                  type: 'PUT',
                  data: $('#update-chart-json').val(),
                  processData: false,
                  success: function(data) {
                     log('update-chart-out', data);
                  }
               });
            });
         </script>
      </div>

      <!-- upload chart data -->

      <div class="row">
         <div class="span2">charts/:id/data</div>
         <div class="span1">PUT</div>
         <div class="span5 form-vertical">
            <input id="upload-chart-id" class="input-xlarge span2" type="text" placeholder="insert a chart-id" />
            <textarea id="upload-data-text" class="span4" rows="6" placeholder="paste your data here"></textarea>
            <a id="upload-data" class="btn btn-primary">upload chart data</a>
            <div>- or -</div>

            <a id="upload-file" class="btn btn-primary disabled">upload a csv file</a>
         </div>
         <div class="span4">
            <div id="upload-data-out" class="output">upload some data using copy&amp;paste from spreadsheet applications or by uploading a csv file from your computer.</div>
         </div>
         <script type="text/javascript">
         $('#upload-data').click(function() {
            $.ajax({
               url: '/api/charts/' + $('#upload-chart-id').val() + '/data',
               type: 'PUT',
               data: $('#upload-data-text').val(),
               processData: false,
               success: function(json) {
                  log('upload-data-out', json);
               }
            })
         })
         </script>
      </div>

      <!-- visualization types -->

      <div class="row sep">
         <div class="span2">visualizations</div>
         <div class="span1">GET</div>
         <div class="span5 form-inline">
            <a id="get-vis" class="btn btn-primary">get visualizations</a>
         </div>
         <div class="span4">
            <div id="get-vis-out" class="output">get list of available visualizations</div>
         </div>
         <script type="text/javascript">
            $('#get-vis').click(function() {
               $.ajax({
                  url: '/api/visualizations',
                  type: 'GET',
                  success: function(data) {
                     log('get-vis-out', data);
                  }
               });
            });
         </script>
      </div>

      <!-- public gallery -->

      <div class="row sep">
         <div class="span2">gallery</div>
         <div class="span1">GET</div>
         <div class="span5 form-inline">
            <a id="gallery" class="btn btn-primary">get chart gallery</a>
         </div>
         <div class="span4">
            <div id="gallery-out" class="output">get 20 most recent charts for public gallery</div>
         </div>
         <script type="text/javascript">
            $('#gallery').click(function() {
               $.ajax({
                  url: '/api/gallery',
                  type: 'GET',
                  success: function(data) {
                     log('gallery-out', data);
                  }
               });
            });
         </script>
      </div>

      <!-- logout current user -->

      <div class="row sep">
         <div class="span2">auth/logout</div>
         <div class="span1">POST</div>
         <div class="span5 form-inline">
            <a id="logout" class="btn btn-primary">logout</a>
         </div>
         <div class="span4">
            <div id="logout-out" class="output">logout current user</div>
         </div>
         <script type="text/javascript">
            $('#logout').click(function() {
               $.ajax({
                  url: '/api/auth/logout',
                  type: 'POST',
                  success: function(data) {
                     log('logout-out', data);
                  }
               });
            });
         </script>
      </div>
      <div class="row footer" style="background:#fff">
         ...
      </div>
   </div>
</body>
</html>